<template>
  <div class="bg-img je-login">
    <img
      v-show="!showOrigin"
      :src="bgThumbnailImg"
      class="bg-image fade-out"
      alt=""
      :style="{ filter: filterBlur }"
    />
    <img v-show="showOrigin" :src="bgOriginImg" class="bg-image" alt="" @load="loadedImg" />
    <login-single v-show="JE_SYS_LOGINMETHOD == loginPlan.MARK_LOGIN_LOGINMETHOD_1" />
    <login-both v-show="JE_SYS_LOGINMETHOD == loginPlan.MARK_LOGIN_LOGINMETHOD_2" />
  </div>
  <div v-if="false" class="test-btn">
    <je-button class="scheme-button-1" @click="changeSchemeSingle">方案一</je-button>
    <je-button class="scheme-button-2" @click="changeSchemeBoth">方案二</je-button>
  </div>
  <company-record :filing-number="filingNumber" />
</template>

<script>
  import { defineComponent, toRefs, onMounted, ref, reactive, nextTick, watch } from 'vue';
  import LoginSingle from '@/views/login/login-single/index.vue';
  import LoginBoth from '@/views/login/login-both/index.vue';
  import CompanyRecord from '@/views/login/components/company-record.vue';
  import VueEvent from '@/helper/event';
  import { LOGIN_PLAN, EVENT_METHOD } from '@/helper/constant';
  import { getFileUrlByKey, decode, isNotEmpty } from '@jecloud/utils';
  // import LoginBg from '@/assets/img/login-bg.png';
  // import LoginLeft from '@/assets/img/login-left.png';
  // import LoginLogo from '@/assets/img/login-logo.png';
  import { Button } from '@jecloud/ui';
  import { GetLoginPlans } from '@/api';
  import {
    hexToRgba,
    getLoginImg,
    getOriginalPicture,
    getThumbnailPicture,
  } from '@/helper/publish';
  import { useGlobalStore } from '@common/store/global-store';
  import '@/views/login/style/index.less';
  import { useMicroStore } from '@common/store/micro-store';
  export default defineComponent({
    name: 'Login',
    components: {
      LoginSingle,
      LoginBoth,
      JeButton: Button,
      CompanyRecord,
    },
    setup() {
      const globalStore = useGlobalStore();
      const microStore = useMicroStore();
      // const thumbnailUrl = getLoginImg('thumbnail'); //缩略图
      // const originalUrl = getLoginImg('backgroundLogo'); //原始图
      let bgThumbnailImg = ref(''); //缩略图
      let bgOriginImg = ref(''); //原始图
      let filterBlur = ref(20);
      const state = reactive({
        // leftImg: LoginLeft,
        // loginLogo: LoginLogo,
        loginPlan: LOGIN_PLAN,
        eventMethod: EVENT_METHOD,
        scheme: LOGIN_PLAN.MARK_LOGIN_LOGINMETHOD_1,
        JE_SYS_LOGINMETHOD: LOGIN_PLAN.MARK_LOGIN_LOGINMETHOD_1, //登录页方式 1 2
        showOrigin: false, //是否显示原始图
        filingNumber: '', //备案号
      });
      const methods = {
        changeSchemeSingle() {
          state.scheme = state.loginPlan.MARK_LOGIN_LOGINMETHOD_1;
          state.JE_SYS_LOGINMETHOD = state.loginPlan.MARK_LOGIN_LOGINMETHOD_1;
          VueEvent.emit(state.eventMethod.LOGIN_METHOD, state);
        },
        changeSchemeBoth() {
          state.scheme = state.loginPlan.MARK_LOGIN_LOGINMETHOD_2;
          state.JE_SYS_LOGINMETHOD = state.loginPlan.MARK_LOGIN_LOGINMETHOD_2;
          VueEvent.emit(state.eventMethod.LOGIN_METHOD, state);
        },
        loadedImg() {
          let count = 10;
          const timeClear = setInterval(() => {
            count--;
            if (count <= 0) {
              clearInterval(timeClear);
              state.showOrigin = true;
            }
            filterBlur.value = `blur(${count}px)`;
          }, 50);
        },
        changeFavicon() {
          //更换浏览器图标 backgroundLogo browserIcon
          const iconUrl = getLoginImg('browserIcon');
          let favicon = document.querySelector('link[rel="icon"]');
          if (favicon !== null) {
            favicon.href = iconUrl;
          } else {
            favicon = document.createElement('link');
            favicon.rel = 'icon';
            favicon.href = iconUrl;
            document.head.appendChild(favicon);
          }
        },
        getBgOrigin(bgImgStr) {
          //获取背景原图
          const bgImgObj = decode(bgImgStr);
          if (Array.isArray(bgImgObj)) {
            bgOriginImg.value = getOriginalPicture(globalStore.activePlan, bgImgObj[0].fileKey);
          } else {
            bgOriginImg.value = getOriginalPicture(globalStore.activePlan, bgImgObj.fileKey);
          }
        },
        getBgThumbnail(bgImgStr) {
          //获取背景缩略图
          const bgImgObj = decode(bgImgStr);
          if (Array.isArray(bgImgObj)) {
            bgThumbnailImg.value = getThumbnailPicture(globalStore.activePlan, bgImgObj[0].fileKey);
          } else {
            bgThumbnailImg.value = getThumbnailPicture(globalStore.activePlan, bgImgObj.fileKey);
          }
        },
      };
      // 更新登录设置
      const setPlanConfig = (resData) => {
        state.JE_SYS_LOGINMETHOD = resData.JE_SYS_LOGINMETHOD; //登录页方式 1 2
        state.JE_CORE_VERIFY = resData.JE_CORE_VERIFY; //登录方式
        state.JE_CORE_PHONELOGIN = resData.JE_CORE_PHONELOGIN; //允许使用手机验证码登录(0:否；1:是)
        state.JE_CORE_PHONEREPASSWORD = resData.JE_CORE_PHONEREPASSWORD; //允许使用手机找回密码(0:否 1:是)
        state.JE_SYS_FASTLOGIN = resData.JE_SYS_FASTLOGIN; //快捷登录方式
        state.JE_SYS_LOGINCOLOR = resData.JE_SYS_LOGINCOLOR; //登录页高亮元素颜色
        let doc = document.getElementsByClassName('je-login')[0];
        doc.style.setProperty('--theme-color', resData.JE_SYS_LOGINCOLOR);
        doc.style.setProperty('--border-rgba', hexToRgba(resData.JE_SYS_LOGINCOLOR, 0.2));
        state.JE_SYS_TITLELOGO = resData.JE_SYS_TITLELOGO; //登录页高亮元素颜色
        state.JE_SYS_ICON = resData.JE_SYS_ICON; //浏览器显示图标（icon）
        state.JE_SYS_WEBTITLE = resData.JE_SYS_WEBTITLE; //浏览页页面标题（Title）
        // document.title = resData.JE_SYS_WEBTITLE;
        state.JE_SYS_WEBLOGO = resData.JE_SYS_WEBLOGO; //系统顶部标题（Logo）
        state.JE_SYS_LEFTIMG = resData.JE_SYS_LEFTIMG; //左侧信息图（img）
        state.JE_SYS_BACKGROUNDLOGO = resData.JE_SYS_BACKGROUNDLOGO; //网页背景图（background
        methods.getBgOrigin(state.JE_SYS_BACKGROUNDLOGO);
        methods.getBgThumbnail(state.JE_SYS_BACKGROUNDLOGO);
        state.REGEXP_NUMBER = resData.REGEXP_NUMBER; //设置密码长度
        state.REGEXP = resData.REGEXP; //设置密码等级
        state.JE_SMS_TIMEOUT = resData.JE_SMS_TIMEOUT; //短信验证码超时时间
        state.filingNumber = resData.JE_SYS_FILING_NUMBER; //备案号
        VueEvent.emit(state.eventMethod.LOGIN_METHOD, state);
      };
      //初始化登录配置项
      const initLoginPlans = () => {
        GetLoginPlans({ code: globalStore.activePlan }).then((config) => {
          if (config.code == 1000 && config.success) {
            globalStore.plans.set(globalStore.activePlan, config.data);
            setPlanConfig(config.data);
          }
        });
      };
      // 注册主应用监听事件
      microStore.on('admin-plan-change', (config) => {
        setPlanConfig(config);
        // bgThumbnailImg.value = getLoginImg('thumbnail');
        // bgOriginImg.value = getLoginImg('backgroundLogo');
      });
      //注册监听用户退出事件
      microStore.on('admin-logout', () => {
        initLoginPlans();
      });

      onMounted(() => {
        // 初始化配置信息
        const config = globalStore.plans.get(globalStore.activePlan);
        if (isNotEmpty(config)) {
          setPlanConfig(config);
        } else {
          initLoginPlans();
        }
        nextTick(() => {
          // methods.changeFavicon();
        });
      });
      return {
        bgThumbnailImg,
        bgOriginImg,
        filterBlur,
        ...toRefs(state),
        ...methods,
      };
    },
  });
</script>
<style>
  .test-btn .ant-btn {
    color: #fff;
    border-color: transparent;
    background: transparent;
  }
  .force-div .ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):hover {
    border-color: #ff625c;
    border-right-width: 1px !important;
    z-index: 1;
  }
  .force-div .ant-input-affix-wrapper:focus,
  .force-div .ant-input-affix-wrapper-focused {
    border-color: #ff625c;
    box-shadow: 0 0 0 2px rgb(255 98 92 / 20%) !important;
    outline: 0;
  }
  .bg-img {
    font-family: 'PingFang SC, PingFang SC-Normal';
  }
</style>
<style scoped lang="less">
  .bg-img {
    width: 100%;
    height: 100%;
    // background-position: center center;
    // background-repeat: no-repeat;
    // background-attachment: fixed;
    // background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .scheme-button-1 {
    position: absolute;
    top: 80px;
    left: 10px;
    background: transparent;
  }
  .scheme-button-2 {
    position: absolute;
    top: 80px;
    left: 100px;
    background: transparent;
  }
  .bg-image {
    position: absolute;
    width: 100%;
    background-size: 100% 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    overflow: hidden;
  }
  .fade-out {
    filter: blur(10px);
  }
</style>
